import React, { useState,useEffect } from 'react'
import '../../css/public.less'
import { useLocation } from 'react-router-dom'
import './css/OrderExchangeCss/OrderExchangeDetail.less'
import {getOrderRefundById} from '../../../api/OrderApi'
import { Input, DatePicker, Space, Button, Table, Modal, DatePickerProps } from 'antd';

interface DataType {
    key: React.Key;
    orderId: number;
    marketState: string
    pay_method: string;
    user_account: string;
    marketTime: string;
    reseonId: number;
    reasonApplication:string;//申请原因
}



const OrderExchangeDetail = () => {
    const [data,setData]=useState<DataType[]>([])
    const [marketNum, setMarketNum] = useState<string>()  //订单编号
    const [handlingProcessor, setHandlingProcessor] = useState<string>()  //申请人
    const [marketTime, setMarketTime] = useState<string>()    //申请时间
    const [handlingTime, setHandlingTime] = useState<string>()  //处理时间
    const [handlingRemark, setHandlingRemark] = useState<string>()    //处理意见
    const [orderTotal,setOrderTotal] = useState<number>()    //订单金额
    const [payMoney, setPayMoney] = useState<number>()    //确认金额
    const [reasonApplication, setReasonApplication] = useState<string>()    //申请原因


        // 路由接受参数
	const locatioin = useLocation()
	// 解构出state
	const { state } = locatioin
    console.log('给你传输数据了哟，请接收',state);
    // setData(state)

    // 请求退款详情信息
    useEffect(() => {
        getOrderRefundById({
            orderId: state
        }).then(res => {
            console.log('退款详情信息', res.data);
            const {marketNum,handlingProcessor,handlingTime,marketTime,handlingRemark,orderTotal,payMoney,reasonApplication} = res.data
            setMarketNum(marketNum)
            setHandlingProcessor(handlingProcessor)
            setMarketTime(marketTime)
            setHandlingRemark(handlingRemark)
            setOrderTotal(orderTotal)
            setHandlingTime(handlingTime)
            setPayMoney(payMoney)
            setReasonApplication(reasonApplication)
            // setOrderData([res.data])
        }).catch(err => {
            console.log('err444', err);
        })
    }, [])

    return (
        <div className='OrderExchangeDetail'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>退货申请详情</p>
                </div>
            </div>

            {/* 内容区 */}
            <div className='page-context'>
                {/* 查询部分 */}
                <div className='banner-search'>
                    <div className='banner-query'>
                        <p>退货申请详情</p>
                    </div>
                </div>
                {/* 数据表格部分 */}
                <div className='data-list'>
                    <div className='banner-foter'>
                        <div>
                            <ul className='banner-left'>
                                <li>订单编号</li>
                                <li>申请状态</li>
                                <li>申请时间</li>
                                <li>用户账号</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>27823424023</p></li>
                                <li><p>待处理</p></li>
                                <li><p>2018-01-09 14:30:29</p></li>
                                <li><p>189 3049 3829</p></li>
                            </ul>
                        </div>
                        <div className='banner-context'>
                            <ul className='banner-left'>
                                <li>订单金额</li>
                                <li>确认金额</li>
                                <li>退款方式</li>
                                <li>售后类型</li>
                                <li>申请原因</li>
                                <li>处理意见</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><p>999.00</p></li>
                                <li><p>999.00</p></li>
                                <li><p>按原支付通道退回</p></li>
                                <li><p>退货</p></li>
                                <li><p>商品质量有问题</p></li>
                                <li><p>同意退货</p></li>
                            </ul>
                        </div>
                        <div className='banner-thear'>
                            <ul className='banner-left'>
                                <li>处理备注</li>
                            </ul>
                            <ul className='banner-right'>
                                <li><Input type='text' className='banner-input' /></li>
                            </ul>
                        </div>
                    </div>
                    <div className='banner-list-button'>
                        <button className='button-del'>确认退货</button>
                        <button className='button-trun'>拒绝退货</button>
                    </div>
                </div>
            </div>
        </div>
    )
}


export default OrderExchangeDetail
